<template>
    <div class="selectClassTree">
        <el-card class="box-card">
            <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
            <div v-loading="loading">
                <div class="tree-box">
                    <el-tree
                        class="filter-tree"
                        @node-click="nodeClick"
                        :data="data"
                        :props="defaultProps"
                        default-expand-all
                        :expand-on-click-node="false"
                        :filter-node-method="filterNode"
                        ref="tree"
                        node-key="id"
                    ></el-tree>
                </div>
            </div>
        </el-card>

        <el-dialog title="修改名称" :visible.sync="dialogTableVisible" width="30%" :close-on-click-modal="false">
            <div style="width: 90%; margin-left: 5%">
                <el-form :model="editForm">
                    <el-form-item label="名称" label-width="80px">
                        <el-input v-model="editForm.name" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click.native="onSubmit">修 改</el-button>
                <el-button @click.native="dialogTableVisible = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'selectClassTree',
    props: {
        treeType: {
            type: String,
            default: 'student',
        },
        schoolId: [Number, String],
        //向外抛出的参数
        getParam: {
            type: String,
            default: 'levelIds',
        },
    },
    data() {
        return {
            loading: true,
            data: [],
            filterText: '',
            defaultProps: {
                children: 'children',
                label: 'label',
            },
            currentNodeData: {},
            dialogTableVisible: false,
            editForm: {
                name: '',
            },
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val)
        },
        schoolId(nval) {
            this.getClassTreeList(nval)
        },
    },
    created() {
        this.getClassTreeList()
    },
    methods: {
        // 获取学校树
        async getClassTreeList(schoolId) {
            this.loading = true
            // 根据类型判断
            let resData = [];
            if (this.treeType === 'student') {  //学生树
                resData = await this.$api.schoolConfig.schoolList.getClassTreeList({ schoolId })
            }else if(this.treeType === 'circle'){//班级圈管理树
                resData = await this.$api.schoolConfig.schoolList.getClassCircleTreeList({ schoolId })
            }else if(this.treeType === 'studentApprove'){//请假管理树
                resData = await this.$api.schoolConfig.schoolList.getStudentApproveTreeList({ schoolId })
            }
            const { code, data } = resData

            if (code === 200) {
                if (data.length > 0) {
                    this.data = data
                } else {
                    this.data = []
                }
            }
            this.loading = false
        },
        // 点击节点触发
        nodeClick(data) {
            this.$emit('filterDataByClass', data)
        },
        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
        // 取消当前高亮的节点 必须设置 node-key 属性 指定 id
        reset() {
            this.$refs.tree.setCurrentKey(null)
        },

        // 点击打开菜单
        updataNodeName(data) {
            this.dialogTableVisible = true
            this.currentNodeData = data
            this.editForm.name = data.nick
        },

        async onSubmit() {
            const { id } = this.currentNodeData
            let levelIds = this.currentNodeData.childrenIds.toString()
            const { code } = await this.$api.schoolConfig.studentList.updateLevelNick({
                id,
                nick: this.editForm.name,
            })

            if (code === 200) {
                this.dialogTableVisible = false
                this.$notify.success('修改成功！')
                this.$emit('filterDataByClass', {
                    levelIds,
                    schoolId: this.schoolId,
                })
                await this.getClassTreeList()
                this.$refs['tree'].setCurrentKey(id)
            }
        },
    },
}
</script>
<style lang="scss" scoped>
.selectClassTree {
    width: 100%;
    height: 100%;
    .box-card{
        height: 100%;
    }
    .tree-box {
        margin-top: 10px;
        overflow: auto;
        height: calc(100vh - 177px);
        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;

            .saasIcon {
                font-size: 15px;
                color: #ccc;
                position: relative;
                z-index: 999;
            }
        }
    }
}
</style>
